import React from "react";
import { Link } from "react-router";
import { Row, Col, Popover, Checkbox, Button, message, notification } from "antd";

import LatestNews from "../message/LatestNews.jsx";

const CheckboxGroup = Checkbox.Group;

class Main extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            myShortcuts: []
        };

        this.setShortcuts = this.setShortcuts.bind(this);
    }

    shortcuts =[
        {
            label: '新增车辆',
            en: "New Vehicle",
            value: 'newVehicle'
        },
        {
            label: '售后分析',
            en: "Services Analysis",
            value: 'servicesAnalysis'
        },
        {
            label: '新增车型',
            en: "New Model",
            value: 'newModel'
        },
        {
            label: '报警分析',
            en: "Alarm Analysis",
            value: 'alarmAnalysis'
        },
        {
            label: '实时地图监控',
            en: "Realtime Monitor",
            value: 'realtime'
        },
        {
            label: '邀请员工',
            en: "Invite Employees",
            value: 'invite'
        },
        {
            label: '新增售后',
            en: "Add Service",
            value: 'addService'
        },
        {
            label: '用户资料',
            en: "My Profile",
            value: 'userInfo'
        },
        {
            label: '新增供应商',
            en: "Add Provider",
            value: 'addProvider'
        },
        {
            label: '信息中心',
            en: "Information Center",
            value: 'infoCenter'
        },
        {
            label: '车辆分析',
            en: "Vehicle Analysis",
            value: 'vehicleAnalysis'
        }
    ]
    defaultShutcuts =["newVehicle", "newModel", "realtime", "addService", "invite"]

    getShutcut(value) {
        for (let i = 0, l = this.shortcuts.length; i < l; i++) {
            let shortcut = this.shortcuts[i];
            if (shortcut.value == value) {
                return shortcut;
            }
        }
    }

    setShortcuts(selectShortcuts) {
        if (selectShortcuts && selectShortcuts.length > 5) {
            selectShortcuts.length = 5;
            message.warning("最多选择5个快捷方式", 5);
        }
        this.setState({
            myShortcuts: selectShortcuts
        });
    // change data action...
    }

    render() {
        let myShutcuts = this.state.myShortcuts;
        (myShutcuts && myShutcuts.length > 0) || (myShutcuts = this.defaultShutcuts);

        const content = (
        <div className="shortcut-settings">
            <CheckboxGroup options={ this.shortcuts } value={ myShutcuts } onChange={ this.setShortcuts } />
        </div>
        );

        const latestNews = [
            {
                id: "1",
                type: "sys",
                msg: <span>您的企业信息审核未通过，平台回复“您上传的企业营业执照图片过于模糊，请重新上传”。<Link>立即查看详情></Link></span>,
                time: "2016-08-06 12:26",
                status: 0
            },
            {
                id: "2",
                type: "service",
                msg: <span>客户人员小米tk_car_113车分配给了小明师傅，建立售后任务单等待处理。<Link>立即查看详情></Link></span>,
                time: "2016-08-04 10:39",
                status: 1
            }
        ];

        return <div>
                   <div className="group-title">
                       <span className="title">快捷方式</span>
                       <span className="description">Shortcut method</span>
                   </div>
                   <Row gutter={ 20 } className="mt20">
                       { myShutcuts.map((value) => <Col span={ 4 } key={ value }>
                                                   <Shutcut data={ this.getShutcut(value) } />
                                                   </Col>) }
                       <Col span="4" offset={ (5 - myShutcuts.length) * 4 }>
                       <Popover placement="bottom" content={ content } title="设置快捷方式" trigger="click">
                           <div className="shortcut" data-type="settings">
                               <div className="label">
                                   <div className="cn">设置快捷方式</div>
                                   <div className="en">Set Shutcuts</div>
                               </div>
                           </div>
                       </Popover>
                       </Col>
                   </Row>
                   <div className="group-title mt30">
                       <span className="title">关注-数据分析</span>
                       <span className="description">Focus on data analysis</span>
                   </div>
                   <div className="panel mt20" style={ { height: "400px" } }>
                   </div>
                   <LatestNews className="mt30" data={ latestNews } />
               </div>
    }
}

class Shutcut extends React.Component {
    render() {
        const data = this.props.data || {};

        return <div className="shortcut" data-type={ data.value } onClick={ () => typeof (data.click) == "function" && data.click() }>
                   <div className="label">
                       <div className="cn">
                           { data.label }
                       </div>
                       <div className="en">
                           { data.en }
                       </div>
                   </div>
               </div>
    }
}

export default Main;
